<template>
    <div class="stock-file">
      <div class="info-item">
          <span class="tipText">文件名 : </span><span>{{listQuery.fileName}}</span>
      </div>
      <div class="info-item">
        <span class="tipText">导入时间 : </span><span>{{listQuery.insertTime}}</span>
      </div>
      <div class="info-item">
        <span class="tipText">导入条数 : </span><span>{{count}}</span>
        <el-button @click="backBtn" type="primary" class="backBtn" size="mini">返回</el-button>
      </div>
      <h4>数据明细</h4>
      <el-table empty-text="暂无任何用户信息" :data="list" v-loading.body="listLoading" border fit style="width: 100%">
        <el-table-column align="center" label="客户ID" >
          <template slot-scope="scope">
            <span>{{scope.row.customerName}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="所属公司">
          <template slot-scope="scope">
            <span>{{ !!scope.row.companyName ? scope.row.companyName : '-'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="行业">
          <template slot-scope="scope">
            <span>{{scope.row.industryName}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="关键词">
          <template slot-scope="scope">
            <span>{{ !!scope.row.keyword ? scope.row.keyword : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="系统标签">
          <template slot-scope="scope">
            <span>{{ !!scope.row.sysLabel ? scope.row.sysLabel : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="号码归属地">
          <template slot-scope="scope">
            <span>{{ scope.row.provinceName + ( !scope.row.cityName || scope.row.cityName === '' ? '' :  '/' + scope.row.cityName ) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="当前虚拟号">
          <template slot-scope="scope">
            <span>{{ scope.row.virtualNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="有效时间">
          <template slot-scope="scope">
            <span>{{ scope.row.lifeTime }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="导入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.insertTime }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" width="50" label="拨打次数">
          <template slot-scope="scope">
            <span>{{ !!scope.row.callCount ? scope.row.callCount : '0'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <router-link @click.native="saveLocal(scope.row,'AD_COUSTOMER')" :to="{path:'/dataStock/details',query:{id:scope.row.customerId}}">
              <el-button type="primary" size="small" icon="el-icon-document">详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" :current-page.sync="listQuery.current"
                       :page-sizes="[10,20,30,50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import { getCustomerList } from '@/api/dataStock'

    export default {
      name: "File",
      data() {
        return {
          listLoading:false,
          listQuery: {
            current: 1,
            pagesize: 10,
            fileName:'',
            insertTime:''
          },
          count:'',
          list:[],
          total:null
        }
      },
      created(){
        this.fetchData();
      },
      watch: {
        // 如果路由有变化，会再次执行该方法
        '$route'(to,from){
          if(to.path === '/dataStock/file'){
            this.fetchData();
          }
        }
      },
      methods:{
        fetchData(){
          this.list = [];
          let thisUserInfo = JSON.parse(localStorage.getItem('AD_FILE'));
          this.listQuery.fileName = thisUserInfo.fileName;
          this.listQuery.insertTime = thisUserInfo.time;
          this.count = thisUserInfo.count;
          this.getList();
        },
        getList(){
          getCustomerList(this.listQuery).then(response => {
            const temp = response.data;
            this.total = temp.total;
            this.list = temp.info;
            this.listLoading = false;
          }).catch(res=>{
            this.listLoading = false
            this.$message.error(res)
          })
        },
        handleSizeChange(val) {
          this.listQuery.pagesize = val
          this.getList()
        },
        handleCurrentChange(val){
          this.listQuery.current = val
          this.getList()
        },
        saveLocal(item,str){
          // 'AD_COUSTOMER'
          let local_user = localStorage.getItem(str);
          !!local_user ? localStorage.removeItem(str) : null;
          localStorage.setItem(str,JSON.stringify(item))
        },
        backBtn(){
          window.history.back()
        }
      }
    }
</script>

<style type="text/scss" lang="scss" scoped>
  @import 'src/styles/mixin.scss';
  .stock-file {
    margin-bottom: 50px;
    .backBtn {
      @include f-right;
      margin-right: 80px;
    }
    .info-item {
      margin: 15px 0px 15px 50px;
      min-width: 250px;
      .tipText {
        display: inline-block;
        margin-right: 10px;
        min-width: 100px;
        text-align: right;
      }
    }
  }
</style>
